<template>
  <div class="buttonNeno">
    <div class="bt" :style="`--color:${color}`">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    color: {
      type: String,
      default: "#03e9f4",
    },
  },
});
</script>
<style lang="scss" scoped>
.buttonNeno {
  display: inline-block;
  .bt {
    font-family: consolas;
    position: relative;
    display: inline-block;
    padding: 1.25rem 1.5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    color: var(--color);
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    //倒影
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
    &:hover {
      background: var(--color);
      color: #050801;
      box-shadow: 0 0 0.25rem var(--color), 0 0 1.25rem var(--color),
        0 0 2.5rem var(--color), 0 0 10rem var(--color);
    }
    span {
      display: block;
      position: absolute;
    }

    span:nth-child(1) {
      top: 0px;
      left: -100%;
      width: 100%;
      height: 0.1rem;
      background: linear-gradient(90deg, transparent, var(--color));
      animation: animate1 1s linear infinite;
    }
    @keyframes animate1 {
      0% {
        left: -100%;
      }
      50%,
      100% {
        left: 100%;
      }
    }
    span:nth-child(2) {
      top: -100%;
      right: 0;
      width: 0.1rem;
      height: 100%;
      background: linear-gradient(180deg, transparent, var(--color));
      animation: animate2 1s linear infinite;
      animation-delay: 0.25s;
    }
    @keyframes animate2 {
      0% {
        top: -100%;
      }
      50%,
      100% {
        top: 100%;
      }
    }
    span:nth-child(3) {
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 0.1rem;
      background: linear-gradient(-90deg, transparent, var(--color));
      animation: animate3 1s linear infinite;
      animation-delay: 0.5s;
    }
    @keyframes animate3 {
      0% {
        right: -100%;
      }
      50%,
      100% {
        right: 100%;
      }
    }
    span:nth-child(4) {
      bottom: -100%;
      left: 0;
      width: 0.1rem;
      height: 100%;
      background: linear-gradient(360deg, transparent, var(--color));
      animation: animate4 1s linear infinite;
      animation-delay: 0.75s;
    }
    @keyframes animate4 {
      0% {
        bottom: -100%;
      }
      50%,
      100% {
        bottom: 100%;
      }
    }
  }
}
</style>
